<template>
  <div class="login-container">
    ceshi == {{ time }}
    <input type="text" />
    <el-pagination
      background
      :current-page="queryForm.pageNo"
      :layout="layout"
      :page-size="queryForm.pageSize"
      :page-sizes="[72, 144, 216, 288]"
      :total="total"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    />
  </div>
</template>

<script>
  export default defineComponent({
    name: 'Ceshi',
    setup() {
      const state = reactive({
        time: '',
        total: 100,
        queryForm: {
          pageNo: 1,
          pageSize: 10,
          title: '',
          colorful: false,
          num: 28,
        },
        layout: 'total, sizes, prev, pager, next, jumper',
      })
      state.time = new Date()

      const handleCurrentChange = (val) => {
        state.queryForm.pageNo = val
      }

      const handleSizeChange = (val) => {
        state.queryForm.pageSize = val
      }

      return {
        ...toRefs(state),
        handleCurrentChange,
        handleSizeChange,
      }
    },
  })
</script>

<style lang="scss" scoped>
</style>
